<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>2.helloReact</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="./lib/react.development.js"></script>
        <script src="./lib/react-dom.development.js"></script>

        <script>
            //需求: 通过react 创建结构
            //  <ul>
            //   <li><a href="https://www.atguigu.com">尚硅谷</a></li>
            //   <li><a href="https://www.atguigu.com">尚硅谷</a></li>
            //   <li><a href="https://www.atguigu.com">尚硅谷</a></li>
            // </ul> 

            /*React.createElement(type,props,...children)用来创建react 元素
                type 元素类型，值是字符串
                props 元素属性，值是对象（如果没有属性，可以写作null）
                ...children 元素内容（子元素，可以有0个或多个）
          */
            //createElement创建 react 元素 
            //元素标签 属性 内容
            const aElement = React.createElement('a',{href: "https://www.atguigu.com"}, className='list');
            const imgElement = React.createElement("img", {
        src: "http://www.atguigu.com/images/index_banner/jichuban.jpg",
      });
            const liElement = React.createElement(
                'li',
                null,
                'aElement'
            );
            const element = React.createElement(
                'ul',
                null,
                'liElement',
                'liElement',
                'liElement',
                'imgElement'
            ) 
            //creatRoot创建节点  .render 通过节点去渲染
            ReactDOM.creatRoot(document.getElementById('root')).render(element);
        </script>
    </body>
</html>